<!-- 首页组件 -->
<template>


    <!-- 主面板区域 -->
    <div class="panel-wrapper-box">
        <div>
            <!-- 左侧面板：工作模式展示 -->
            <div class="left-transition">
                <factory-left :show="state.show" :leftData1="state.leftData1" :leftData2="state.leftData2"
                    :leftData3="state.leftData3"></factory-left>
            </div>

            <div class="center-transition">
                <div class="center-top-metrics">
                    <div class="center-top-metrics-item">
                        <div class="center-top-metrics-item-icon">
                            <img src="@/assets/dataIndex/right/企业.png" alt="">
                        </div>
                        <div class="center-top-metrics-item-content">
                            <div class="center-top-metrics-item-content-title">入驻企业</div>
                            <div class="center-top-metrics-item-content-value">
                                {{ state.centerTopData.manufacturerCount || '--' }}
                                <div class="center-top-metrics-item-content-value-unit">家</div>    
                            </div>
                            <div class="metric-change positive">
                                <div class="change-text">同比   </div>
                                <CaretUpOutlined class="change-icon-up"/>
                                <CaretDownFilled class="change-icon-down"/>
                                <span class="change-text" :class="[1?'change-icon-up':'change-icon-down']">17.23%</span>
                            </div> 
                        </div>
                    </div>
                    <div class="center-top-metrics-item">
                        <div class="center-top-metrics-item-icon"> 
                            <img src="@/assets/dataIndex/right/公交线路.png" alt=""></div>
                        <div class="center-top-metrics-item-content">
                            <div class="center-top-metrics-item-content-title">累计开放线路</div>
                            <div class="center-top-metrics-item-content-value">
                                {{ state.centerTopData.lineCount || '--' }}
                                <div class="center-top-metrics-item-content-value-unit">条</div>    
                            </div>
                            <div class="metric-change positive">
                                <div class="change-text">同比</div>
                                <CaretUpOutlined class="change-icon-up"/>
                                <CaretDownFilled class="change-icon-down"/>
                                <span class="change-text" :class="[1?'change-icon-up':'change-icon-down']">17.23%</span>
                            </div> 
                        </div>
                    </div>
                    <div class="center-top-metrics-item">
                        <div class="center-top-metrics-item-icon"> 
                            <img src="@/assets/dataIndex/right/添加线路.png" alt="">
                            </div>
                        <div class="center-top-metrics-item-content">
                            <div class="center-top-metrics-item-content-title">路网覆盖里程</div>
                            <div class="center-top-metrics-item-content-value">
                                {{ state.centerTopData.distance || '--' }}
                                <div class="center-top-metrics-item-content-value-unit">公里</div>    
                            </div>
                            <div class="metric-change positive">
                                <div class="change-text">同比   </div>
                                <CaretUpOutlined class="change-icon-up"/>
                                <CaretDownFilled class="change-icon-down"/>
                                <span class="change-text" :class="[1?'change-icon-up':'change-icon-down']">17.23%</span>
                            </div> 
                        </div>
                    </div>
                    <div class="center-top-metrics-item">
                        <div class="center-top-metrics-item-icon"> 
                            <img src="@/assets/dataIndex/right/车辆.png" alt="">
                            </div>
                        <div class="center-top-metrics-item-content">
                            <div class="center-top-metrics-item-content-title">累计接入车辆</div>
                            <div class="center-top-metrics-item-content-value">
                                {{ state.centerTopData.vehicleCount || '--' }}
                                <div class="center-top-metrics-item-content-value-unit">辆</div>    
                            </div>
                            <div class="metric-change positive">
                                <div class="change-text">同比   </div>
                                <CaretUpOutlined class="change-icon-up"/>
                                <CaretDownFilled class="change-icon-down"/>
                                <span class="change-text" :class="[1?'change-icon-up':'change-icon-down']">17.23%</span>
                            </div> 
                        </div>
                    </div>
                </div>
              
            </div>
            <!-- 右侧面板：数据统计展示 -->
            <div class="right-transition">
                <factory-right :show="state.show" :rightData1="state.rightData1" :rightData2="state.rightData2"
                    :rightData3="state.rightData3" :rightData4="state.rightData4" :homeData="state.homeData"
                    :stationData="state.selectStationData"></factory-right>
            </div>

            <!-- 功能按钮区域 -->
            <!-- <div class="btn-transition">
               
                <a-button type="primary" class="screenfull-btn"
                    :style="{ 'right': state.show ? '572px' : '152px', 'transition': 'all 1s' }"
                    @click="getAllStationMap">
                    <img v-if="state.show" src="@/assets/dataIndex/refresh.png" alt="">
                    <div class="disb">地图刷新</div>
                </a-button>
            </div> -->

        </div>

        <!-- 地图视图组件 -->
        <mapView ref="mapViewRef" :mapControlData="state.mapControlData"></mapView>

        <div class="map-control">
            <div class="map-control-item">
                <a-checkbox v-model:checked=" state.mapControlData.vehicle ">
                    车辆

                    <img src="@/assets/dataIndex/right/car1.png" alt="">

                </a-checkbox>
                
            </div>
            <div class="map-control-item">
                <a-checkbox v-model:checked=" state.mapControlData.line ">
                    线路

                    <img src="@/assets/dataIndex/right/line-2.png" alt="">

                </a-checkbox>
   
            </div>
            
            <!-- <div class="map-control-item">   
                <a-checkbox v-model:checked=" state.mapControlData.road ">
                    道路

                    <img src="@/assets/dataIndex/right/road-2.png" alt="">

                </a-checkbox>
            </div> -->
            
        </div>
    </div>


</template>

<script setup>
// 样式导入
import "animate.css"

// 组件导入
import FactoryLeft from "./components/factory-left.vue"
import FactoryRight from "./components/factory-right"
import mapView from "./components/mapView.vue"

import { CaretDownOutlined, DownOutlined ,CaretUpOutlined,CaretDownFilled} from '@ant-design/icons-vue'
import { onMounted, reactive, ref, defineOptions, watch } from 'vue'
import { useRouter } from "vue-router"
// import { useStore } from "vuex"
import {
    findGroupCount
    , findTotalCount
    , queryDistanceYear
    , queryGroupManufacturerCount
    , queryGroupOperatorType
    , queryGroupTypeCount
    , queryLevelGroupCount
    , queryLineTypeCount
} from "@/service/nmcApi"

// import { queryOrgEquipTree, queryStatistics, queryStatisticsAlarmLog, equipOilFieldEditDetail } from "@/service/oilField";

// 组件引用
const router = useRouter()      // 路由实例
// const store = useStore()        // Vuex状态管理实例
const mapViewRef = ref()        // 地图视图组件引用

// const IpCallRef = ref()         // IP呼叫组件引用

// 状态管理
const state = reactive({
    show: true,                    // 是否显示全屏模式
    homeData: {},                  // 首页数据对象
    alarmData: {},                 // 报警数据对象

    companyData: {},             // 公司数据对象
    // topAlarmLevel: '',
    // sitType: 1,
    getDataTimer: null,


    leftData1: {
        drivingCount: 0,  //行驶数量,
        errorCount: 0,  //故障数量,
        normalCount: 0,  //正常数量,
        offlineCount: 0,  //离线数量,
        onlineCount: 0,  //在线数量,           
        optCount: 0,  //投入运营,
        stopCount: 0,  //停止数量,   
    },  // 左侧1，车辆概况分布
    leftData2: [],
    leftData3: {},
    rightData1: {},
    rightData2: {},
    rightData3: {},
    rightData4: [],

    centerTopData: {
        distance: 0,  //安全里程,
        lineCount: 0,  //线路数量,
        manufacturerCount: 0,  //企业入驻数量,
        vehicleCount: 0,  //车辆数量,
    },

    mapControlData: {
        vehicle: true,
        line: true,
        road: true,
    },
    // centerBottomData: [],
})

// 组件名称定义
defineOptions({
    name: 'home'
})

// 生命周期钩子
onMounted(() => {
    getHomeData()
    getAlarmData()

})
// state.getDataTimer = setInterval(() => {
//     getHomeData()
//     getAlarmData()
// }, 10000)



/**
 * 查看所有油田
 */
const getAllStationMap = () => {

    mapViewRef.value.mapRefresh()
    getHomeData()

}


/**
 * 获取首页统计数据
 */
const getHomeData = (sitType) => {
    state.sitType = sitType || state.sitType
    let params = {
        // oilFieldId: state.selectStationData ? state.selectStationData.oilFieldId : '',
        // sitType: state.sitType
    }
    // 首页大屏接口   不同类型的车辆数量 左侧1，车辆概况分布
    findGroupCount(params).then(res => {
        if (res.status == '000_0000_0000') {
            state.leftData1 = res.result
            // console.log(state.leftData1,'state.leftData1')
        }
    })
    // 首页大屏接口   左侧2，车型分布
    queryGroupTypeCount(params).then(res => {
        if (res.status == '000_0000_0000') {
            // {vehicleTypeName: "新车250808", count: "1"}
            // {vehicleTypeName: "菜鸟3", count: "1"}
            // {vehicleTypeName: "广州车A", count: "4"}
            state.leftData2 = res.result
        }
    })
    // 首页大屏接口   左侧3，企业入驻排行
    queryGroupManufacturerCount(params).then(res => {
        if (res.status == '000_0000_0000') {
            state.leftData3 = res.result
        }
    })


    // 首页大屏接口   查询总数量 中心上
    findTotalCount(params).then(res => {
        if (res.status == '000_0000_0000') {
            state.centerTopData = res.result
        }
    })

    // 首页大屏接口   右边动态线路评价 右上1
    queryLineTypeCount(params).then(res => {
        if (res.status == '000_0000_0000') {
            state.rightData1 = res.result
        }
    })

    // 首页大屏接口   右边安全里程趋势 右2
    queryDistanceYear(params).then(res => {
        if (res.status == '000_0000_0000') {
            state.rightData2 = res.result
        }
    })
    // 首页大屏接口   右边实时事件分析-按类型的数量 右3
    queryLevelGroupCount(params).then(res => {
        if (res.status == '000_0000_0000') {
            state.rightData3 = res.result
        }
    })

    // 首页大屏接口   右边实时事件分析-按运营企业 右4
    queryGroupOperatorType(params).then(res => {
        if (res.status == '000_0000_0000') {
            state.rightData4 = res.result
        }
    })







}
const getAlarmData = (alarmLevel = '') => {
    state.topAlarmLevel = alarmLevel ? alarmLevel === '99' ? '' : alarmLevel : state.topAlarmLevel
    let params = {
        oilFieldId: state.selectStationData ? state.selectStationData.oilFieldId : '',
        alarmLevel: state.topAlarmLevel
    }
    // queryStatisticsAlarmLog(params).then(res => {
    //     if (res.status =='000_0000_0000') {
    //         state.alarmData = res.data
    //     }
    // })
}

/**
 * 切换全屏显示
 */
const showAll = () => {
    state.show = !state.show
}


</script>

<style lang="less" scoped>
// 报警闪烁动画样式
.allAlarm {
    div {
        div {
            animation: op 1s infinite;
        }

        @keyframes op {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    }

    // 四个角的闪烁效果样式
    .top_left,
    .top_right,
    .bottom_left,
    .bottom_right {

        .top_left_part1,
        .top_right_part1,
        .bottom_left_part1,
        .bottom_right_part1 {
            position: fixed;
            width: 388px;
            height: 16px;
            overflow: hidden;
            z-index: 999;
        }

        .top_left_part2,
        .top_right_part2,
        .bottom_left_part2,
        .bottom_right_part2 {
            position: fixed;
            width: 18px;
            height: 66px;
            overflow: hidden;
            z-index: 999;
        }
    }

    // 位置设置
    .top_left {
        .top_left_part1 {
            top: 0;
            left: 0;
        }

        .top_left_part2 {
            top: 16px;
            left: 0;
        }
    }

    .top_right {
        .top_right_part1 {
            top: 0;
            right: 0;
        }

        .top_right_part2 {
            top: 16px;
            right: 0;
        }
    }

    .bottom_left {
        .bottom_left_part1 {
            bottom: 0;
            left: 0;
        }

        .bottom_left_part2 {
            bottom: 16px;
            left: 0;
        }
    }

    .bottom_right {
        .bottom_right_part1 {
            bottom: 0;
            right: 0;
        }

        .bottom_right_part2 {
            bottom: 16px;
            right: 0;
        }
    }
}

// 主面板样式
.panel-wrapper-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

// 中心顶部指标区域样式
.center-transition {
    position: fixed;
    top: 95px;
    left: 456px;
    right: 456px;
    
    z-index: 10;
    height: 150px;
    background: #030635 url("@/assets/dataIndex/right/factory_top.png") no-repeat;
        background-size: 100% 100%;
        padding: 22px 8px 22px 22px;
    .center-top-metrics {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content:space-around;
        align-items: center;
        gap: 20px;
        padding: 0 20px;
        .center-top-metrics-item {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .center-top-metrics-item-icon {
            width: 55px;
            height: 55px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
            }
            &:after {
                content: '';
                display: block;
                width: 30px;
                height: 30px;
                background: rgba(0, 255, 255, .2);
                border-radius: 50%;
                position: absolute;
                bottom: -6px;
                left: -6px;
                z-index: 1;
            }
        }
        .center-top-metrics-item-content {
            .center-top-metrics-item-content-title {
                font-size: 18px;
                font-weight: 700;
                color: #fff;
            }
        }
        .center-top-metrics-item-content-value {
            font-weight: 700;
            font-style: normal;
            font-size: 28px;
            color: #00CCCC;
        }
        .center-top-metrics-item-content-value-unit {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
        }
        .metric-change {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            color: #FFFFFF;
        }
        .change-icon-up {
            // font-size: 14px;
            color: #33FF99;
        }
        .change-icon-down {
            color: #FF0000;
        }
        .change-text {
            font-size: 12px;
            font-weight: 700;
            // color: #fff;
        }
    }
}



// .metric-card {
//     flex: 1;
//     background: rgba(17, 47, 157, 0.86);
//     border-radius: 8px;
//     padding: 16px 20px;
//     box-shadow: inset 0 0 8px 0 rgba(84, 177, 255, 0.75);
//     border: 1px solid rgba(84, 177, 255, 0.3);
//     display: flex;
//     align-items: center;
//     gap: 16px;
//     min-height: 80px;
//     transition: all 0.3s ease;

//     &:hover {
//         background: rgba(17, 47, 157, 0.95);
//         box-shadow: inset 0 0 12px 0 rgba(84, 177, 255, 0.9);
//         transform: translateY(-2px);
//     }
// }

.metric-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(84, 177, 255, 0.2);
    border-radius: 50%;
    flex-shrink: 0;

    .icon-building,
    .icon-route,
    .icon-distance,
    .icon-vehicle {
        font-size: 24px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
}

// .metric-content {
//     flex: 1;
//     color: #fff;

//     .metric-title {
//         font-size: 14px;
//         color: rgba(255, 255, 255, 0.8);
//         margin-bottom: 4px;
//         font-weight: 400;
//     }

//     .metric-value {
//         font-size: 28px;
//         font-weight: 700;
//         color: #fff;
//         line-height: 1;
//         margin-bottom: 4px;
//         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
//     }

//     .metric-unit {
//         font-size: 12px;
//         color: rgba(255, 255, 255, 0.6);
//         margin-left: 4px;
//     }

//     .metric-change {
//         display: flex;
//         align-items: center;
//         gap: 4px;
//         font-size: 12px;

//         &.positive {
//             color: #52c41a;
//         }

//         &.negative {
//             color: #ff4d4f;
//         }

//         .change-icon {
//             font-size: 14px;
//             font-weight: bold;
//         }

//         .change-text {
//             font-weight: 500;
//         }
//     }
// }

// // 响应式设计
// @media (max-width: 1400px) {
//     .center-top-metrics {
//         gap: 15px;
//     }

//     .metric-card {
//         padding: 12px 16px;
//         min-height: 70px;
//     }

//     .metric-content {
//         .metric-value {
//             font-size: 24px;
//         }
//     }
// }

// @media (max-width: 1200px) {
//     .center-transition {
//         width: 90%;
//     }

//     .center-top-metrics {
//         gap: 10px;
//     }

//     .metric-card {
//         padding: 10px 12px;
//         min-height: 60px;
//     }

//     .metric-icon {
//         width: 40px;
//         height: 40px;

//         .icon-building,
//         .icon-route,
//         .icon-distance,
//         .icon-vehicle {
//             font-size: 20px;
//         }
//     }

//     .metric-content {
//         .metric-title {
//             font-size: 12px;
//         }

//         .metric-value {
//             font-size: 20px;
//         }
//     }
// }

// 按钮样式
.btn-transition {
    .screenfull-btn {
        position: fixed;
        top: 100px;
        z-index: 7;
        width: 120px;
        height: 32px;
        background: rgba(17, 47, 157, 0.66);
        box-shadow: inset 0px 0px 8px 0px rgba(84, 177, 255, 0.75);
        border-radius: 4px;
        font-size: 12px;
        border: none;

        img {
            width: 14px;
            height: 14px;
            margin-right: 9px;
        }

        &:hover {
            background: rgba(1, 19, 84, 0.66);
            box-shadow: inset 0 0 8px 0 #00CEFF;
        }
    }

    .screenfull-btn-bottom {
        position: fixed;
        bottom: 32px;
        z-index: 99;
        border: none;
        cursor: pointer;

        img {
            width: 64px;
            height: 64px;
        }
    }
}

// 报警音频隐藏
.AlarmAudio {
    display: none;
}

// .select-transition {
//     .select_station {
//         position: fixed;
//         top: 100px;
//         left: 460px;
//         z-index: 7;
//         min-width: 160px;
//         transition: all 1s;
//         color: #fff;

//         .select_title {
//             box-sizing: border-box;
//             padding: 4px 8px 4px 20px;
//             display: flex;
//             align-items: center;
//             justify-content: space-between;
//             background: rgba(17, 47, 157, 0.86);
//             box-shadow: inset 0 0 8px 0 rgba(84, 177, 255, 0.75);
//             border-radius: 4px;
//             cursor: pointer;

//             .station_name {
//                 margin-right: 10px;
//             }
//         }

//         .select_list_box {
//             margin-top: 4px;
//             background: rgba(17, 47, 157, 0.86);
//             box-shadow: inset 0 0 8px 0 rgba(84, 177, 255, 0.75);
//             border-radius: 4px;
//             cursor: pointer;
//             overflow-y: scroll;
//             transition: all 1s;

//             &::-webkit-scrollbar {
//                 /*滚动条整体样式*/
//                 width: 0;
//                 /*高宽分别对应横竖滚动条的尺寸*/
//             }

//             .select_item {
//                 box-sizing: border-box;
//                 padding: 4px 20px;
//                 display: flex;
//                 align-items: center;
//                 border-bottom: 1px solid rgb(45, 80, 203);

//                 &:hover {
//                     background: rgba(84, 177, 255, 0.75);
//                 }
//             }

//             .select_item_active {
//                 background: rgba(84, 177, 255, 0.75);
//             }
//         }
//     }

//     .select_station_detail {
//         left: 540px;
//     }

//     .select_station_full {
//         left: 20px;
//     }

//     .select_station_detail_full {
//         left: 100px;
//     }

//     .back_btn {
//         z-index: 7;
//         position: fixed;
//         top: 100px;
//         left: 460px;
//         width: 60px;
//         height: 30px;
//         border-radius: 4px;
//         color: #fff;
//         background: rgba(17, 47, 157, 0.86);
//         box-shadow: inset 0px 0px 8px 0px rgba(84, 177, 255, 0.75);
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         cursor: pointer;
//         transition: all 1s;
//     }

//     .back_btn_full {
//         left: 20px;
//     }
// }

// // 报警内容样式
// .alarm_content {
//     position: relative;
//     width: 100%;
//     height: 520px;
//     padding-bottom: 10px;

//     .close {
//         position: absolute;
//         top: -20px;
//         right: -20px;
//         width: 24px;
//         height: 24px;
//         cursor: pointer;
//     }
// }

.map-control{
    position: fixed;
    bottom: 10px;
    right: 456px;
    z-index: 10;

    width: 120px;
    // height: 80px;
    padding: 6px 12px;
    // background-color: #0f1e4b;
    background: url("@/assets/dataIndex/warn_bg.png") no-repeat;
    background-size: 100% 100%;
    // box-shadow: 0 2px 4px 0 #18091d;

    font-size: 12px;
    border-radius: 6px;
    position: absolute;
    bottom: 20px;
    right: 440px;
    .map-control-item{
        margin-bottom: 10px;
        color: #fff;
    }
        img{
            width:24px;
            height: 24px;
        }
        :deep(.nmc-checkbox-wrapper){
            color: #fff;
        }
        :deep(.nmc-checkbox-inner){
            background-color: transparent;
            // border: 1px solid #1f4ffc;
        }

        :deep(.nmc-checkbox-wrapper-checked){
            .nmc-checkbox-inner{
                background-color: #00cccc;
            }
        }
}
</style>
